---
title: Using with React
description: Learn how to easily integrate @embedpdf/engines into your React applications using the provided hooks.
searchable: true
---

import { Callout } from '@/components/callout'

# Using with React

While `@embedpdf/engines` is a framework-agnostic library, it includes a dedicated React hook, `usePdfiumEngine`, to simplify integration and manage the engine's lifecycle within your components.

This is the recommended way to get started with EmbedPDF in a React application.

## Installation

The `usePdfiumEngine` hook is included directly within the main package.

```sh npm2yarn
npm install @embedpdf/engines
````

## The `usePdfiumEngine` Hook

This hook handles the creation of the `WebWorkerEngine`, manages its loading and initialization state, and provides you with a ready-to-use `engine` instance.

Here's a basic example of how to use it in a component:

```tsx filename="PDFProcessor.tsx"
import { usePdfiumEngine } from '@embedpdf/engines/react';
import { useEffect, useState } from 'react';

export const PDFProcessor = () => {
  const { engine, isLoading, error } = usePdfiumEngine();
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // The engine object from the hook needs to be initialized once.
    if (engine && !isReady) {
      engine.initialize().toPromise().then(() => setIsReady(true));
    }
  }, [engine, isReady]);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (isLoading || !isReady) {
    return <div>Initializing PDF Engine...</div>;
  }

  // Once isLoading is false and isReady is true, the engine is ready!
  return (
    <div>
      <p>PDF Engine is ready to use!</p>
      {/* You can now pass the `engine` prop to other components */}
    </div>
  );
};
```

{/*
<Callout>
**Learn More**
For in-depth documentation on `usePdfiumEngine`, interactive examples, and other React-specific utilities, please see the full **[@embedpdf/react package documentation](/docs/react/introduction)**.
</Callout>
*/}